﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jquery元素放大效果</title>
<link href="./themes/ext/css/jquery.zoom18x18.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.zoom.js"></script>
<style>
	body{width: 2000px; height: 2000px;}
	.box{display: inline-block; width: 250px; height: 200px; float: left; border: 1px solid #eeeeee; background-color: #FAEC9E; margin: 10px 5px auto;}
	.title{height: 20px; font-size: 13px; line-height: 20px; padding: 2px; background-color: lightblue;}
	.content{margin: 0px auto; font-weight: 600;}
	.desc{font-size: 16px; }
</style>
<script>
	jQuery(document).ready(function($){
		/*
		$('.box').zoom();
		//or
		*/
		$('.box').zoom({
			properties: {
				_speed: 350,
				top: 80,
				//left: 20,
				//width: 'auto',
				//height: 'auto',
				enabledMask: false
			},
			callback: {
				onZoom: function(box, op, zoom_temp){
					var demo_iframe = box.find("#demo_iframe");
					if(demo_iframe){
						demo_iframe.css({width: box.width(), height: box.height()});
						if(!demo_iframe.data("show")){
							demo_iframe.data("show", true).attr("src", "http://www.baidu.com");
						}
					}
				},
				onResume: function(box, op, zoom_temp){
					var demo_iframe = box.find("#demo_iframe");
					if(demo_iframe){
						demo_iframe.css({width: box.width(), height: box.height()});
					}
				}
			}
		});
		$("#ref4").click(function(){
			if($("#demo_iframe").attr("src")){
				$("#demo_iframe").attr("src", "http://www.baidu.com");
			}
		});
	})
</script>
</head>
<body>
<div class="desc">
	<h1>jQuery.zoom-v1.3</h1>
	<h1 style="font-size: 20px; text-decoration: underline; color: blue;"> I am a Chinese, so I can only write in Chinese, if you are not a Chinese, you can try to translate these words.</h1>
	<span>功能上基本算是我想到的都在这了，逻辑上可能也不完善，如果有什么不足的地方，还请朋友们给我一些意见。</span>
</div>
	<div class="box">
		<div class="title">
			<a class="titlebar-btn titlebar-refresh"></a>
			<div class="titlebar-btn titlebar-max"></div>
			我是小①!
		</div>
		<div class="content">content</div>
	</div>
	<div class="box">
		<div class="title">
			<a class="titlebar-btn titlebar-refresh"></a>
			<div class="titlebar-btn titlebar-max"></div>
			我是小②!
		</div>
		<div class="content">content</div>
	</div>
	<div class="box">
		<div class="title">
			<a class="titlebar-btn titlebar-refresh"></a>
			<div class="titlebar-btn titlebar-max"></div>
			我是小③!
		</div>
		<div class="content">content</div>
	</div>
	<div class="box">
		<div class="title">
			<a id="ref4" class="titlebar-btn titlebar-refresh"></a>
			<div class="titlebar-btn titlebar-max"></div>
			我是小④!
		</div>
		<div class="content">
			<iframe id="demo_iframe" frameborder="0" ></iframe>
		</div>
	</div>
</body>
</html>